<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TabBar图标生成器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            margin-bottom: 30px;
        }
        .icon-preview {
            display: flex;
            gap: 20px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        .preview-item {
            text-align: center;
        }
        .preview-item h3 {
            margin: 10px 0;
            font-size: 14px;
            color: #666;
        }
        canvas {
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #fff;
        }
        button {
            background: #007AFF;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .download-all {
            background: #52c41a;
            margin-top: 20px;
            padding: 12px 30px;
            font-size: 16px;
        }
        .instructions {
            background: #e6f7ff;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            border-left: 4px solid #007AFF;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>TabBar图标生成器</h1>
        <div class="instructions">
            <strong>使用说明：</strong>
            <ol>
                <li>点击"生成所有图标"按钮</li>
                <li>图标会自动下载到您的下载文件夹</li>
                <li>将下载的图标文件移动到项目的 static/tabbar/ 目录下</li>
            </ol>
        </div>

        <div class="icon-preview" id="preview"></div>

        <button class="download-all" onclick="generateAllIcons()">生成所有图标</button>
    </div>

    <script>
        // 绘制图标函数
        function drawIcon(canvas, type, isActive, isPlus = false) {
            const ctx = canvas.getContext('2d');
            const size = 162; // 2x size for better quality
            canvas.width = size;
            canvas.height = size;

            // 清空画布
            ctx.clearRect(0, 0, size, size);

            const color = isActive ? '#007AFF' : '#8a8a8a';
            const centerX = size / 2;
            const centerY = size / 2;

            if (isPlus) {
                // 绘制+号图标（中间突出）
                if (isActive) {
                    // 选中状态：圆形背景 + 白色+号
                    ctx.fillStyle = '#007AFF';
                    ctx.beginPath();
                    ctx.arc(centerX, centerY, size * 0.4, 0, Math.PI * 2);
                    ctx.fill();
                    
                    ctx.strokeStyle = '#ffffff';
                    ctx.lineWidth = size * 0.08;
                    ctx.lineCap = 'round';
                    // 横线
                    ctx.beginPath();
                    ctx.moveTo(centerX - size * 0.25, centerY);
                    ctx.lineTo(centerX + size * 0.25, centerY);
                    ctx.stroke();
                    // 竖线
                    ctx.beginPath();
                    ctx.moveTo(centerX, centerY - size * 0.25);
                    ctx.lineTo(centerX, centerY + size * 0.25);
                    ctx.stroke();
                } else {
                    // 未选中状态：灰色+号
                    ctx.strokeStyle = color;
                    ctx.lineWidth = size * 0.1;
                    ctx.lineCap = 'round';
                    // 横线
                    ctx.beginPath();
                    ctx.moveTo(centerX - size * 0.3, centerY);
                    ctx.lineTo(centerX + size * 0.3, centerY);
                    ctx.stroke();
                    // 竖线
                    ctx.beginPath();
                    ctx.moveTo(centerX, centerY - size * 0.3);
                    ctx.lineTo(centerX, centerY + size * 0.3);
                    ctx.stroke();
                }
            } else if (type === 'history') {
                // 绘制历史上报图标（时钟图标）
                ctx.strokeStyle = color;
                ctx.fillStyle = color;
                ctx.lineWidth = size * 0.08;
                ctx.lineCap = 'round';

                // 绘制圆形表盘
                ctx.beginPath();
                ctx.arc(centerX, centerY, size * 0.35, 0, Math.PI * 2);
                ctx.stroke();

                // 绘制时针和分针
                const hourAngle = -Math.PI / 2 + (Math.PI / 6); // 指向2点
                const minuteAngle = -Math.PI / 2 + (Math.PI / 3); // 指向4点

                // 时针
                ctx.beginPath();
                ctx.moveTo(centerX, centerY);
                ctx.lineTo(
                    centerX + Math.cos(hourAngle) * size * 0.2,
                    centerY + Math.sin(hourAngle) * size * 0.2
                );
                ctx.stroke();

                // 分针
                ctx.beginPath();
                ctx.moveTo(centerX, centerY);
                ctx.lineTo(
                    centerX + Math.cos(minuteAngle) * size * 0.25,
                    centerY + Math.sin(minuteAngle) * size * 0.25
                );
                ctx.stroke();

                // 中心点
                ctx.beginPath();
                ctx.arc(centerX, centerY, size * 0.03, 0, Math.PI * 2);
                ctx.fill();
            } else if (type === 'mine') {
                // 绘制我的图标（用户图标）
                ctx.strokeStyle = color;
                ctx.fillStyle = color;
                ctx.lineWidth = size * 0.08;
                ctx.lineCap = 'round';

                // 绘制头部（圆形）
                ctx.beginPath();
                ctx.arc(centerX, centerY - size * 0.15, size * 0.2, 0, Math.PI * 2);
                ctx.fill();

                // 绘制身体（半圆）
                ctx.beginPath();
                ctx.arc(centerX, centerY + size * 0.05, size * 0.25, 0, Math.PI);
                ctx.fill();
            }
        }

        // 下载图标
        function downloadIcon(canvas, filename) {
            canvas.toBlob(function(blob) {
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }, 'image/png');
        }

        // 生成所有图标
        function generateAllIcons() {
            const icons = [
                { type: 'history', name: 'history', isPlus: false },
                { type: 'history', name: 'history-active', isPlus: false, active: true },
                { type: 'plus', name: 'plus', isPlus: true },
                { type: 'plus', name: 'plus-active', isPlus: true, active: true },
                { type: 'mine', name: 'mine', isPlus: false },
                { type: 'mine', name: 'mine-active', isPlus: false, active: true }
            ];

            icons.forEach((icon, index) => {
                setTimeout(() => {
                    const canvas = document.createElement('canvas');
                    drawIcon(canvas, icon.type, icon.active || false, icon.isPlus);
                    downloadIcon(canvas, icon.name + '.png');
                }, index * 200); // 延迟下载，避免浏览器阻止多个下载
            });

            alert('所有图标已开始下载！请将下载的文件移动到 static/tabbar/ 目录下。');
        }

        // 预览图标
        window.onload = function() {
            const preview = document.getElementById('preview');
            const previewIcons = [
                { type: 'history', name: '历史上报', active: false },
                { type: 'history', name: '历史上报（选中）', active: true },
                { type: 'plus', name: '立即上报', active: false, isPlus: true },
                { type: 'plus', name: '立即上报（选中）', active: true, isPlus: true },
                { type: 'mine', name: '我的', active: false },
                { type: 'mine', name: '我的（选中）', active: true }
            ];

            previewIcons.forEach(icon => {
                const div = document.createElement('div');
                div.className = 'preview-item';
                const canvas = document.createElement('canvas');
                canvas.style.width = '81px';
                canvas.style.height = '81px';
                drawIcon(canvas, icon.type, icon.active, icon.isPlus);
                div.appendChild(canvas);
                const h3 = document.createElement('h3');
                h3.textContent = icon.name;
                div.appendChild(h3);
                preview.appendChild(div);
            });
        };
    </script>
</body>
</html>
